<template>
  <div id="app">
    <router-view />
      <mt-tabbar v-model="selected" v-if="$route.meta.requiresAuth">
        <mt-tab-item id="首页" @click.native="$router.push('/home')">
          <img slot="icon" src="../static/img/home.png">
          首页
        </mt-tab-item>
        <mt-tab-item id="商城"  @click.native="$router.push('/shop')">
          <img slot="icon" src="../static/img/shop.png">
          商城
        </mt-tab-item>
        <mt-tab-item id="添加" class="add">
          <img slot="icon" src="../static/addthis1.png">
        </mt-tab-item>
        <mt-tab-item class="cart" id="购物车"  @click.native="$router.push('/cart')">
          <span class="cart-num mint-badge is-error is-size-small">4</span>
          <img slot="icon" src="../static/img/cart.png">
          购物车
        </mt-tab-item>
        <mt-tab-item id="我的"  @click.native="$router.push('/personal')" >
          <img slot="icon" src="../static/img/me.png">
          我的
        </mt-tab-item>
      </mt-tabbar>
  </div>
</template>

<script >
  export default {
    name: 'App',
    data() {
      return {
        active: 0,
        selected:''
      }
    },
    methods:{
      change(){
        console.log('sss')
      }
    },
    mounted(){
      console.log(this.$route.meta)
    }
  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100%;
  }
  body {
    margin: 0;
    background-color: #f9f9f9;
  }
  #app {
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
  }
  .add{
    margin-top: 8px;
  }

  .mint-tabbar{
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 6vh;
  }

  .cart{
    position: relative;
  }
  .cart-num{
    position: absolute;
    width: 6px;
    height: 11px;
    left: 22%;
    top: -1px;
  }
</style>
